<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue'

const selectedColor = ref('#3498db')
const hexColor = ref('#3498db')
const rgbColor = ref('rgb(52, 152, 219)')
const hslColor = ref('hsl(204, 70%, 53%)')
const rgbaColor = ref('rgba(52, 152, 219, 1)')
const hslaColor = ref('hsla(204, 70%, 53%, 1)')
const cmykColor = ref('cmyk(76%, 31%, 0%, 14%)')
const errorMessage = ref('')
const isSuccess = ref(false)
const colorHistory = ref<string[]>([])
const isEyedropperSupported = ref(false)
const colorPalettes: Record<string, string[]> = {
  material: [
    '#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5',
    '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4caf50',
    '#8bc34a', '#cddc39', '#ffeb3b', '#ffc107', '#ff9800',
    '#ff5722', '#795548', '#9e9e9e', '#607d8b', '#000000'
  ],
  flat: [
    '#1abc9c', '#16a085', '#2ecc71', '#27ae60', '#3498db',
    '#2980b9', '#9b59b6', '#8e44ad', '#34495e', '#2c3e50',
    '#f1c40f', '#f39c12', '#e67e22', '#d35400', '#e74c3c',
    '#c0392b', '#ecf0f1', '#bdc3c7', '#95a5a6', '#7f8c8d'
  ],
  pastel: [
    '#ffeaa7', '#fab1a0', '#ff7675', '#fd79a8', '#fdcb6e',
    '#e17055', '#81ecec', '#74b9ff', '#a29bfe', '#6c5ce7',
    '#55a3ff', '#26de81', '#feca57', '#ff9ff3', '#54a0ff',
    '#5f27cd', '#00d2d3', '#ff9f43', '#ee5a24', '#0abde3'
  ],
  gradient: [
    '#667eea', '#764ba2', '#f093fb', '#f5576c', '#4facfe',
    '#00f2fe', '#43e97b', '#38f9d7', '#ffecd2', '#fcb69f',
    '#a8edea', '#fed6e3', '#d299c2', '#fef9d7', '#ebc0fd',
    '#d6ecd2', '#fad0c4', '#ffd1ff', '#c2e9fb', '#a1c4fd'
  ]
}
const selectedPalette = ref('material')
const customColors = ref<string[]>([])

// 检查浏览器是否支持 EyeDropper API
onMounted(() => {
  isEyedropperSupported.value = 'EyeDropper' in window
})

// 颜色转换函数
function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null
}

function rgbToHex(r: number, g: number, b: number): string {
  return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
}

function rgbToHsl(r: number, g: number, b: number): { h: number; s: number; l: number } {
  r /= 255
  g /= 255
  b /= 255
  
  const max = Math.max(r, g, b)
  const min = Math.min(r, g, b)
  let h = 0
  let s = 0
  const l = (max + min) / 2
  
  if (max === min) {
    h = s = 0 // achromatic
  } else {
    const d = max - min
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
    
    switch (max) {
      case r: h = (g - b) / d + (g < b ? 6 : 0); break
      case g: h = (b - r) / d + 2; break
      case b: h = (r - g) / d + 4; break
    }
    h /= 6
  }
  
  return {
    h: Math.round(h * 360),
    s: Math.round(s * 100),
    l: Math.round(l * 100)
  }
}

function rgbToCmyk(r: number, g: number, b: number): { c: number; m: number; y: number; k: number } {
  r /= 255
  g /= 255
  b /= 255
  
  const k = 1 - Math.max(r, g, b)
  const c = k === 1 ? 0 : (1 - r - k) / (1 - k)
  const m = k === 1 ? 0 : (1 - g - k) / (1 - k)
  const y = k === 1 ? 0 : (1 - b - k) / (1 - k)
  
  return {
    c: Math.round(c * 100),
    m: Math.round(m * 100),
    y: Math.round(y * 100),
    k: Math.round(k * 100)
  }
}

// 更新所有颜色格式
function updateAllFormats(color: string) {
  try {
    selectedColor.value = color
    hexColor.value = color
    
    const rgb = hexToRgb(color)
    if (rgb) {
      rgbColor.value = `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`
      rgbaColor.value = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 1)`
      
      const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b)
      hslColor.value = `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)`
      hslaColor.value = `hsla(${hsl.h}, ${hsl.s}%, ${hsl.l}%, 1)`
      
      const cmyk = rgbToCmyk(rgb.r, rgb.g, rgb.b)
      cmykColor.value = `cmyk(${cmyk.c}%, ${cmyk.m}%, ${cmyk.y}%, ${cmyk.k}%)`
      
      addToHistory(color)
      errorMessage.value = '颜色格式更新成功 ✓'
      isSuccess.value = true
    }
  } catch (error) {
    errorMessage.value = `颜色转换失败: ${(error as Error).message}`
    isSuccess.value = false
  }
}

// 从十六进制输入更新
function updateFromHex() {
  if (hexColor.value.match(/^#[0-9A-Fa-f]{6}$/)) {
    updateAllFormats(hexColor.value)
  } else {
    errorMessage.value = '请输入有效的十六进制颜色值 (如: #FF0000)'
    isSuccess.value = false
  }
}

// 从RGB输入更新
function updateFromRgb() {
  const match = rgbColor.value.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/)
  if (match) {
    const r = parseInt(match[1])
    const g = parseInt(match[2])
    const b = parseInt(match[3])
    
    if (r >= 0 && r <= 255 && g >= 0 && g <= 255 && b >= 0 && b <= 255) {
      const hex = rgbToHex(r, g, b)
      updateAllFormats(hex)
    } else {
      errorMessage.value = 'RGB值必须在0-255之间'
      isSuccess.value = false
    }
  } else {
    errorMessage.value = '请输入有效的RGB格式 (如: rgb(255, 0, 0))'
    isSuccess.value = false
  }
}

// 使用 EyeDropper API 吸取颜色
async function pickColor() {
  if (!isEyedropperSupported.value) {
    errorMessage.value = '当前浏览器不支持颜色吸取功能'
    isSuccess.value = false
    return
  }
  
  try {
    // @ts-ignore
    const eyeDropper = new EyeDropper()
    const result = await eyeDropper.open()
    updateAllFormats(result.sRGBHex)
    errorMessage.value = '颜色吸取成功 ✓'
    isSuccess.value = true
  } catch (error) {
    if ((error as Error).name !== 'AbortError') {
      errorMessage.value = `颜色吸取失败: ${(error as Error).message}`
      isSuccess.value = false
    }
  }
}

// 添加到历史记录
function addToHistory(color: string) {
  if (!colorHistory.value.includes(color)) {
    colorHistory.value.unshift(color)
    if (colorHistory.value.length > 20) {
      colorHistory.value = colorHistory.value.slice(0, 20)
    }
  }
}

// 从历史记录选择颜色
function selectFromHistory(color: string) {
  updateAllFormats(color)
}

// 从调色板选择颜色
function selectFromPalette(color: string) {
  updateAllFormats(color)
}

// 添加到自定义调色板
function addToCustomPalette() {
  if (!customColors.value.includes(selectedColor.value)) {
    customColors.value.push(selectedColor.value)
    errorMessage.value = '颜色已添加到自定义调色板 ✓'
    isSuccess.value = true
  } else {
    errorMessage.value = '颜色已存在于自定义调色板中'
    isSuccess.value = false
  }
}

// 从自定义调色板移除颜色
function removeFromCustomPalette(color: string) {
  const index = customColors.value.indexOf(color)
  if (index > -1) {
    customColors.value.splice(index, 1)
    errorMessage.value = '颜色已从自定义调色板移除 ✓'
    isSuccess.value = true
  }
}

// 生成随机颜色
function generateRandomColor() {
  const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0')
  updateAllFormats(randomColor)
}

// 生成颜色变体
function generateColorVariants() {
  const rgb = hexToRgb(selectedColor.value)
  if (!rgb) return []
  
  const variants = []
  
  // 亮度变体
  for (let i = 0.2; i <= 1.8; i += 0.2) {
    const r = Math.min(255, Math.max(0, Math.round(rgb.r * i)))
    const g = Math.min(255, Math.max(0, Math.round(rgb.g * i)))
    const b = Math.min(255, Math.max(0, Math.round(rgb.b * i)))
    variants.push(rgbToHex(r, g, b))
  }
  
  return variants
}

// 生成互补色
function generateComplementaryColor() {
  const rgb = hexToRgb(selectedColor.value)
  if (!rgb) return
  
  const complementary = rgbToHex(255 - rgb.r, 255 - rgb.g, 255 - rgb.b)
  updateAllFormats(complementary)
}

// 生成类似色
function generateAnalogousColors() {
  const rgb = hexToRgb(selectedColor.value)
  if (!rgb) return []
  
  const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b)
  const analogous = []
  
  for (let offset of [-30, -15, 15, 30]) {
    const newHue = (hsl.h + offset + 360) % 360
    // 简化的HSL到RGB转换
    const color = `hsl(${newHue}, ${hsl.s}%, ${hsl.l}%)`
    analogous.push(color)
  }
  
  return analogous
}

// 复制到剪贴板
function copyToClipboard(text: string, type: string) {
  navigator.clipboard.writeText(text).then(() => {
    errorMessage.value = `${type}已复制到剪贴板 ✓`
    isSuccess.value = true
  })
}

// 清空历史记录
function clearHistory() {
  colorHistory.value = []
  errorMessage.value = '历史记录已清空 ✓'
  isSuccess.value = true
}

// 清空自定义调色板
function clearCustomPalette() {
  customColors.value = []
  errorMessage.value = '自定义调色板已清空 ✓'
  isSuccess.value = true
}

// 计算属性：颜色变体
const colorVariants = computed(() => generateColorVariants())
const analogousColors = computed(() => generateAnalogousColors())

// 获取颜色亮度（用于判断文字颜色）
function getColorBrightness(color: string): number {
  const rgb = hexToRgb(color)
  if (!rgb) return 0
  return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000
}

// 判断是否使用深色文字
function shouldUseDarkText(color: string): boolean {
  return getColorBrightness(color) > 128
}
</script>

<template>
  <div class="color-tool">
    <div class="color-picker-section">
      <h3>颜色选择器</h3>
      <div class="picker-container">
        <div class="color-preview" :style="{ backgroundColor: selectedColor }">
          <span :style="{ color: shouldUseDarkText(selectedColor) ? '#000' : '#fff' }">
            {{ selectedColor }}
          </span>
        </div>
        <input 
          type="color" 
          v-model="selectedColor" 
          @input="updateAllFormats(selectedColor)"
          class="color-input"
        >
        <div class="picker-controls">
          <button class="btn btn-primary" @click="generateRandomColor">🎲 随机颜色</button>
          <button 
            class="btn btn-info" 
            @click="pickColor" 
            :disabled="!isEyedropperSupported"
            :title="isEyedropperSupported ? '点击吸取屏幕颜色' : '浏览器不支持颜色吸取'"
          >
            🎨 吸取颜色
          </button>
          <button class="btn btn-secondary" @click="generateComplementaryColor">🔄 互补色</button>
          <button class="btn btn-success" @click="addToCustomPalette">➕ 添加到调色板</button>
        </div>
      </div>
    </div>

    <div class="status" v-if="errorMessage" :class="{ 'error': !isSuccess, 'success': isSuccess }">
      {{ errorMessage }}
    </div>

    <div class="color-formats">
      <h3>颜色格式</h3>
      <div class="formats-grid">
        <div class="format-item">
          <label>HEX:</label>
          <div class="input-group">
            <input 
              v-model="hexColor" 
              @blur="updateFromHex"
              @keyup.enter="updateFromHex"
              class="format-input"
              placeholder="#FF0000"
            >
            <button class="btn btn-sm btn-success" @click="copyToClipboard(hexColor, 'HEX颜色值')">📋</button>
          </div>
        </div>
        
        <div class="format-item">
          <label>RGB:</label>
          <div class="input-group">
            <input 
              v-model="rgbColor" 
              @blur="updateFromRgb"
              @keyup.enter="updateFromRgb"
              class="format-input"
              placeholder="rgb(255, 0, 0)"
            >
            <button class="btn btn-sm btn-success" @click="copyToClipboard(rgbColor, 'RGB颜色值')">📋</button>
          </div>
        </div>
        
        <div class="format-item">
          <label>HSL:</label>
          <div class="input-group">
            <input 
              v-model="hslColor" 
              class="format-input"
              readonly
              placeholder="hsl(0, 100%, 50%)"
            >
            <button class="btn btn-sm btn-success" @click="copyToClipboard(hslColor, 'HSL颜色值')">📋</button>
          </div>
        </div>
        
        <div class="format-item">
          <label>RGBA:</label>
          <div class="input-group">
            <input 
              v-model="rgbaColor" 
              class="format-input"
              readonly
              placeholder="rgba(255, 0, 0, 1)"
            >
            <button class="btn btn-sm btn-success" @click="copyToClipboard(rgbaColor, 'RGBA颜色值')">📋</button>
          </div>
        </div>
        
        <div class="format-item">
          <label>HSLA:</label>
          <div class="input-group">
            <input 
              v-model="hslaColor" 
              class="format-input"
              readonly
              placeholder="hsla(0, 100%, 50%, 1)"
            >
            <button class="btn btn-sm btn-success" @click="copyToClipboard(hslaColor, 'HSLA颜色值')">📋</button>
          </div>
        </div>
        
        <div class="format-item">
          <label>CMYK:</label>
          <div class="input-group">
            <input 
              v-model="cmykColor" 
              class="format-input"
              readonly
              placeholder="cmyk(0%, 100%, 100%, 0%)"
            >
            <button class="btn btn-sm btn-success" @click="copyToClipboard(cmykColor, 'CMYK颜色值')">📋</button>
          </div>
        </div>
      </div>
    </div>

    <div class="color-variants" v-if="colorVariants.length > 0">
      <h3>颜色变体</h3>
      <div class="variants-container">
        <div class="variant-group">
          <h4>亮度变体</h4>
          <div class="color-grid">
            <div 
              v-for="variant in colorVariants" 
              :key="variant"
              class="color-swatch"
              :style="{ backgroundColor: variant }"
              @click="selectFromPalette(variant)"
              :title="variant"
            >
              <span :style="{ color: shouldUseDarkText(variant) ? '#000' : '#fff' }">
                {{ variant }}
              </span>
            </div>
          </div>
        </div>
        
        <div class="variant-group" v-if="analogousColors.length > 0">
          <h4>类似色</h4>
          <div class="color-grid">
            <div 
              v-for="(color, index) in analogousColors" 
              :key="index"
              class="color-swatch hsl-swatch"
              :style="{ backgroundColor: color }"
              @click="updateAllFormats(color)"
              :title="color"
            >
              <span>{{ color.split(',')[0].replace('hsl(', '') }}°</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="color-palettes">
      <h3>预设调色板</h3>
      <div class="palette-selector">
        <select v-model="selectedPalette" class="palette-select">
          <option value="material">Material Design</option>
          <option value="flat">Flat UI</option>
          <option value="pastel">Pastel Colors</option>
          <option value="gradient">Gradient Colors</option>
        </select>
      </div>
      <div class="color-grid">
        <div 
          v-for="color in colorPalettes[selectedPalette]" 
          :key="color"
          class="color-swatch"
          :style="{ backgroundColor: color }"
          @click="selectFromPalette(color)"
          :title="color"
        >
          <span :style="{ color: shouldUseDarkText(color) ? '#000' : '#fff' }">
            {{ color }}
          </span>
        </div>
      </div>
    </div>

    <div class="custom-palette" v-if="customColors.length > 0">
      <h3>自定义调色板</h3>
      <div class="palette-controls">
        <button class="btn btn-danger btn-sm" @click="clearCustomPalette">🗑️ 清空</button>
      </div>
      <div class="color-grid">
        <div 
          v-for="color in customColors" 
          :key="color"
          class="color-swatch custom-swatch"
          :style="{ backgroundColor: color }"
          @click="selectFromPalette(color)"
          @contextmenu.prevent="removeFromCustomPalette(color)"
          :title="`${color} (右键删除)`"
        >
          <span :style="{ color: shouldUseDarkText(color) ? '#000' : '#fff' }">
            {{ color }}
          </span>
          <button 
            class="remove-btn"
            @click.stop="removeFromCustomPalette(color)"
          >
            ×
          </button>
        </div>
      </div>
    </div>

    <div class="color-history" v-if="colorHistory.length > 0">
      <h3>颜色历史</h3>
      <div class="history-controls">
        <button class="btn btn-danger btn-sm" @click="clearHistory">🗑️ 清空历史</button>
      </div>
      <div class="color-grid">
        <div 
          v-for="color in colorHistory" 
          :key="color"
          class="color-swatch"
          :style="{ backgroundColor: color }"
          @click="selectFromHistory(color)"
          :title="color"
        >
          <span :style="{ color: shouldUseDarkText(color) ? '#000' : '#fff' }">
            {{ color }}
          </span>
        </div>
      </div>
    </div>

    <div class="help-section">
      <details>
        <summary>颜色工具说明</summary>
        <div class="help-content">
          <h4>功能特性:</h4>
          <ul>
            <li><strong>颜色选择:</strong> 使用颜色选择器或输入颜色值</li>
            <li><strong>格式转换:</strong> 支持HEX、RGB、HSL、RGBA、HSLA、CMYK格式</li>
            <li><strong>颜色吸取:</strong> 使用EyeDropper API吸取屏幕颜色（需浏览器支持）</li>
            <li><strong>预设调色板:</strong> 提供多种设计风格的调色板</li>
            <li><strong>颜色变体:</strong> 自动生成亮度变体和类似色</li>
            <li><strong>自定义调色板:</strong> 保存常用颜色</li>
            <li><strong>颜色历史:</strong> 记录最近使用的颜色</li>
          </ul>
          <h4>使用技巧:</h4>
          <ul>
            <li>点击颜色块快速选择颜色</li>
            <li>使用📋按钮复制颜色值到剪贴板</li>
            <li>右键点击自定义调色板中的颜色可删除</li>
            <li>颜色吸取功能需要在HTTPS环境下使用</li>
            <li>支持键盘Enter键确认颜色输入</li>
          </ul>
          <h4>颜色格式说明:</h4>
          <ul>
            <li><strong>HEX:</strong> 十六进制表示法，如 #FF0000</li>
            <li><strong>RGB:</strong> 红绿蓝值，如 rgb(255, 0, 0)</li>
            <li><strong>HSL:</strong> 色相、饱和度、亮度，如 hsl(0, 100%, 50%)</li>
            <li><strong>RGBA/HSLA:</strong> 带透明度的RGB/HSL</li>
            <li><strong>CMYK:</strong> 印刷四色模式</li>
          </ul>
        </div>
      </details>
    </div>
  </div>
</template>

<style scoped>
.color-tool {
  width: 100%;
}

.color-picker-section {
  margin-bottom: 20px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.color-picker-section h3 {
  margin: 0 0 15px 0;
  color: #fff;
  font-size: 1.1em;
}

.picker-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
}

.color-preview {
  width: 200px;
  height: 100px;
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: transform 0.2s ease;
}

.color-preview:hover {
  transform: scale(1.05);
}

.color-input {
  width: 80px;
  height: 40px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  background: none;
}

.picker-controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  color: #fff;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-sm {
  padding: 4px 8px;
  font-size: 12px;
}

.btn-primary {
  background: #007bff;
}

.btn-primary:hover:not(:disabled) {
  background: #0056b3;
}

.btn-secondary {
  background: #6c757d;
}

.btn-secondary:hover:not(:disabled) {
  background: #545b62;
}

.btn-success {
  background: #28a745;
}

.btn-success:hover:not(:disabled) {
  background: #1e7e34;
}

.btn-info {
  background: #17a2b8;
}

.btn-info:hover:not(:disabled) {
  background: #117a8b;
}

.btn-warning {
  background: #ffc107;
  color: #212529;
}

.btn-warning:hover:not(:disabled) {
  background: #e0a800;
}

.btn-danger {
  background: #dc3545;
}

.btn-danger:hover:not(:disabled) {
  background: #c82333;
}

.status {
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 20px;
  font-weight: 500;
}

.status.error {
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
  border: 1px solid rgba(220, 53, 69, 0.3);
}

.status.success {
  background: rgba(40, 167, 69, 0.1);
  color: #28a745;
  border: 1px solid rgba(40, 167, 69, 0.3);
}

.color-formats {
  margin-bottom: 20px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.color-formats h3 {
  margin: 0 0 15px 0;
  color: #fff;
  font-size: 1.1em;
}

.formats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
}

.format-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.format-item label {
  color: #ccc;
  font-size: 14px;
  font-weight: 500;
}

.input-group {
  display: flex;
  gap: 5px;
}

.format-input {
  flex: 1;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: #fff;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 14px;
  outline: none;
}

.format-input:focus {
  border-color: rgba(255, 255, 255, 0.4);
}

.format-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.color-variants {
  margin-bottom: 20px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.color-variants h3 {
  margin: 0 0 15px 0;
  color: #fff;
  font-size: 1.1em;
}

.variants-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.variant-group h4 {
  margin: 0 0 10px 0;
  color: #ccc;
  font-size: 1em;
}

.color-palettes,
.custom-palette,
.color-history {
  margin-bottom: 20px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.color-palettes h3,
.custom-palette h3,
.color-history h3 {
  margin: 0 0 15px 0;
  color: #fff;
  font-size: 1.1em;
}

.palette-selector {
  margin-bottom: 15px;
}

.palette-select {
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  outline: none;
}

.palette-select:focus {
  border-color: rgba(255, 255, 255, 0.4);
}

.palette-controls,
.history-controls {
  margin-bottom: 15px;
  display: flex;
  gap: 10px;
}

.color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}

.color-swatch {
  height: 60px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.color-swatch:hover {
  transform: scale(1.05);
  border-color: rgba(255, 255, 255, 0.4);
}

.hsl-swatch {
  font-size: 11px;
}

.custom-swatch {
  position: relative;
}

.custom-swatch:hover .remove-btn {
  opacity: 1;
}

.remove-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: rgba(220, 53, 69, 0.8);
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.remove-btn:hover {
  background: rgba(220, 53, 69, 1);
}

.help-section {
  margin-top: 20px;
}

.help-section details {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.help-section summary {
  padding: 12px 15px;
  cursor: pointer;
  color: #fff;
  font-weight: 500;
  user-select: none;
}

.help-section summary:hover {
  background: rgba(255, 255, 255, 0.05);
}

.help-content {
  padding: 15px;
  color: #ccc;
}

.help-content h4 {
  margin: 0 0 10px 0;
  color: #fff;
  font-size: 1em;
}

.help-content ul {
  margin: 0 0 15px 0;
  padding-left: 20px;
}

.help-content li {
  margin-bottom: 5px;
  line-height: 1.4;
}

.help-content strong {
  color: #fff;
}

@media (max-width: 768px) {
  .formats-grid {
    grid-template-columns: 1fr;
  }
  
  .color-grid {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  }
  
  .color-swatch {
    height: 50px;
    font-size: 10px;
  }
  
  .picker-controls {
    justify-content: center;
  }
  
  .variants-container {
    gap: 15px;
  }
}
</style>